<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<%@ include file="/WEB-INF/pages/include/globa.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>花·生</title>
	<link rel="shortcut icon" href="resources/ico/favicon.ico" >
	<link rel="stylesheet" type="text/css" href="${SERVER_PATH}/resources/css/common.css" />
	<link rel="stylesheet" type="text/css" href="${SERVER_PATH}/resources/css/index.css" />
	<link rel="stylesheet" type="text/css" href="${SERVER_PATH}/resources/css/header.css" />
	<link rel="stylesheet" type="text/css" href="${SERVER_PATH}/resources/js/pie/css/asPieProgress.min.css">
	
</head>
<body>
	<header>
		<%@include file="/WEB-INF/pages/include/header.jsp" %>
	</header>
	<div class="home-container">
		<div class="section section1"  id="section1">
			<div class="posi-relative">
				<img alt="baby" class="video_bg_img" src="http://on01whf2s.bkt.clouddn.com/peanut/deepsky_201710523232.gif">
			    <div class="video_cover"></div>
			</div>
		    <div class="video-content" >
			    	<div class="v-content-logo">
			    		<img class="v-logo-img" alt="logo" src="${SERVER_PATH}/resources/img/logo-t.png">
		    		</div>	
			    <div class="v-content">
			    	<p>合理价格 · 品质服务 · 温情感受；您身边最真诚的赴美生子咨询师</p>
			    	<p>开启您宝宝的美籍人生</p>
			    </div>
			    <div class="v-content-foot">
			    	<span class="title">了解更多，请点下拉按钮</span>
			    	<span class="arrows">
						<i class="iconfont icon-xiangxiajiantou" id="arrows" onclick="toNext()"></i>
					</span>
			    </div>
			   
			</div>
		</div>
		<div class="section section2" id="section2">
			<div class="flexbox posi-relative" >
				<div class="sub-title" >
					<div class="sub-content" >
						<div class="pie_progress" id="pie2" role="progressbar">
				          <span class="pie_progress__content">
				          	<div class="timeCircle">
						   		<p>01</p>
								<p><span class="line"></span><p>
						   		<p>07</p>
						   	</div>
				       	 </span>
						</div>
						<div id="sub-content-info2">
							<h3>房屋外形</h3>
							<a href="${SERVER_PATH}/page/detail#note1">了解更多</a>
						</div>
					</div>
					<div class="sub-content-foot">
						<p>联系我们：</p>
						<p>微信：花生USAbaby(二维码于右侧图中)</p>
						<p>邮箱：xiaosongshuKZD@163.com</p>
					</div>
				</div>
				<div class="img-bg" style="background:url(http://on01whf2s.bkt.clouddn.com/peanut/4.jpg?imageMogr2/quality/10!/interlace/1) center center"></div>
				<div class="content">
					<img alt="房屋外形" class="content-img" id="scroll1" src="http://on01whf2s.bkt.clouddn.com/peanut/4.jpg?imageMogr2/quality/10!/interlace/1"  />
					<p class="copyright">
						&copy;花生baby 2017 <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">粤ICP备17098309号-1</a></p>
				</div>
			</div>
		</div>
          	<div class="section section3" id="section3">
			<div class="flexbox posi-relative">
				<div class="sub-title">
					<div class="sub-content" >
						<div class="pie_progress" id="pie3" role="progressbar">
					         <span class="pie_progress__content">
					          	<div class="timeCircle">
							   		<p>02</p>
									<p><span class="line"></span><p>
							   		<p>07</p>
							   	</div>
					        </span>
					    </div>
						<div id="sub-content-info2">
							<h3>室内设计</h3>
							<a href="${SERVER_PATH}/page/detail#note2">了解更多</a>
						</div>
					</div>
					<div class="sub-content-foot">
						<p>联系我们：</p>
						<p>微信：花生USAbaby(二维码于右侧图中)</p>
						<p>邮箱：xiaosongshuKZD@163.com</p>
					</div>
				</div>
				<div class="img-bg" style="background:url(http://on01whf2s.bkt.clouddn.com/peanut/1.jpg?imageMogr2/quality/10!/interlace/1) center center"></div>
				<div class="content">
					<img alt="室内设计" class="content-img" id="scroll2" src="http://on01whf2s.bkt.clouddn.com/peanut/1.jpg?imageMogr2/quality/10!/interlace/1" />
					<p class="copyright">
						&copy;花生baby 2017 <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">粤ICP备17098309号-1</a></p>
				</div>
			</div>
		</div>
        <div class="section section4" id="section4">
			<div class="flexbox posi-relative">
				<div class="sub-title">
					<div class="sub-content">
						<div class="pie_progress" id="pie4" role="progressbar">
					        <span class="pie_progress__content">
					          	<div class="timeCircle">
							   		<p>03</p>
									<p><span class="line"></span><p>
							   		<p>07</p>
							   	</div>
					        </span>
					    </div>
						<div id="sub-content-info2">
							<h3>社区配套</h3>
							<a href="${SERVER_PATH}/page/detail#note3">了解更多</a>
						</div>
					</div>
					<div class="sub-content-foot">
						<p>联系我们：</p>
						<p>微信：花生USAbaby(二维码于右侧图中)</p>
						<p>邮箱：xiaosongshuKZD@163.com</p>
					</div>
				</div>
				<div class="img-bg" style="background:url(http://on01whf2s.bkt.clouddn.com/peanut/7.jpg?imageMogr2/quality/10!/interlace/1) center center"></div>
				<div class="content">
					<img alt="社区配套" class="content-img" id="scroll3" src="http://on01whf2s.bkt.clouddn.com/peanut/7.jpg?imageMogr2/quality/10!/interlace/1"/>
					<p class="copyright">
						&copy;花生baby 2017 <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">粤ICP备17098309号-1</a></p>
				</div>
			</div>
		</div>
          	<div class="section section5"  id="section5">
			<div class="flexbox posi-relative">
				<div class="sub-title">
					<div class="sub-content">
						<div class="pie_progress" id="pie5" role="progressbar">
					        <span class="pie_progress__content">
					          	<div class="timeCircle">
							   		<p>04</p>
									<p><span class="line"></span><p>
							   		<p>07</p>
							   	</div>
					        </span>
					    </div>
						<div id="sub-content-info2">
							<h3>医疗条件</h3>
							<a href="${SERVER_PATH}/page/detail#note4">了解更多</a>
						</div>
					</div>
					<div class="sub-content-foot">
						<p>联系我们：</p>
						<p>微信：花生USAbaby(二维码于右侧图中)</p>
						<p>邮箱：xiaosongshuKZD@163.com</p>
					</div>
				</div>
				<div class="img-bg" style="background:url(http://on01whf2s.bkt.clouddn.com/peanut/2.jpg?imageMogr2/quality/10!/interlace/1) center center"></div>
				<div class="content">
					<img alt="医疗条件" class="content-img" id="scroll4" src="http://on01whf2s.bkt.clouddn.com/peanut/2.jpg?imageMogr2/quality/10!/interlace/1"/>
					<p class="copyright">
						&copy;花生baby 2017 <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">粤ICP备17098309号-1</a></p>
				</div>
			</div>
		</div>
        <div class="section section6"  id="section6">
			<div class="flexbox posi-relative">
				<div class="sub-title">
					<div class="sub-content">
						<div class="pie_progress" id="pie6" role="progressbar">
					        <span class="pie_progress__content">
					          	<div class="timeCircle">
							   		<p>05</p>
									<p><span class="line"></span><p>
							   		<p>07</p>
							   	</div>
					        </span>
					    </div>
						<div id="sub-content-info2">
							<h3>服务范畴</h3>
							<a href="${SERVER_PATH}/page/detail#note5">了解更多</a>
						</div>
					</div>
					<div class="sub-content-foot">
						<p>联系我们：</p>
						<p>微信：花生USAbaby(二维码于右侧图中)</p>
						<p>邮箱：xiaosongshuKZD@163.com</p>
					</div>
				</div>
				<div class="img-bg" style="background:url(http://on01whf2s.bkt.clouddn.com/peanut/5.jpg?imageMogr2/quality/10!/interlace/1) center center"></div>
				<div class="content">
					<img alt="服务范畴" class="content-img" id="scroll5" src="http://on01whf2s.bkt.clouddn.com/peanut/5.jpg?imageMogr2/quality/10!/interlace/1"/>
					<p class="copyright">
						&copy;花生baby 2017 <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">粤ICP备17098309号-1</a></p>
				</div>
			</div>
		</div>
        <div class="section section7"  id="section7">
			<div class="flexbox posi-relative">
				<div class="sub-title">
					<div class="sub-content">
						<div class="pie_progress" id="pie7" role="progressbar">
					       <span class="pie_progress__content">
					          	<div class="timeCircle">
							   		<p>06</p>
									<p><span class="line"></span><p>
							   		<p>07</p>
							   	</div>
					        </span>
					    </div>
						<div id="sub-content-info2">
							<h3>餐饮品质</h3>
							<a href="${SERVER_PATH}/page/detail#note6">了解更多</a>
						</div>
					</div>
					<div class="sub-content-foot">
						<p>联系我们：</p>
						<p>微信：花生USAbaby(二维码于右侧图中)</p>
						<p>邮箱：xiaosongshuKZD@163.com</p>
					</div>
				</div>
				<div class="img-bg" style="background:url(http://on01whf2s.bkt.clouddn.com/peanut/3.jpg?imageMogr2/quality/10!/interlace/1) center center"></div>
				<div class="content">
					<img alt="餐饮品质" class="content-img" id="scroll6" src="http://on01whf2s.bkt.clouddn.com/peanut/3.jpg?imageMogr2/quality/10!/interlace/1"/>
					<p class="copyright">
						&copy;花生baby 2017 <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">粤ICP备17098309号-1</a></p>
				</div>
			</div>
		</div>
        <div class="section section8"  id="section8">
			<div class="flexbox posi-relative">
				<div class="sub-title">
					<div class="sub-content">
						<div class="pie_progress" id="pie8" role="progressbar">
					        <span class="pie_progress__content">
					          	<div class="timeCircle">
							   		<p>07</p>
									<p><span class="line"></span><p>
							   		<p>07</p>
							   	</div>
					        </span>
					    </div>
						<div id="sub-content-info2">
							<h3>周边环境</h3>
							<a href="${SERVER_PATH}/page/detail#note7">了解更多</a>
						</div>
					</div>
					<div class="sub-content-foot">
						<p>联系我们：</p>
						<p>微信：花生USAbaby(二维码于右侧图中)</p>
						<p>邮箱：xiaosongshuKZD@163.com</p>
					</div>
				</div>
				<div class="img-bg" style="background:url(http://on01whf2s.bkt.clouddn.com/peanut/6.jpg?imageMogr2/quality/10!/interlace/1) center center"></div>
				<div class="content">
					<img alt="周边环境" class="content-img" id="scroll7" src="http://on01whf2s.bkt.clouddn.com/peanut/6.jpg?imageMogr2/quality/10!/interlace/1"/>
					<p class="copyright">
						&copy;花生baby 2017 <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">粤ICP备17098309号-1</a></p>
				</div>
			</div>
		</div>
    </div>
    
	<script type="text/javascript" src="${SERVER_PATH}/resources/js/jquery-1.8.3.min.js"></script>
    <!-- 时间动画 -->
	<script type="text/javascript" src="${SERVER_PATH}/resources/js/pie/jquery-asPieProgress.js"></script>
	<script>
    jQuery(function($) {
	 	$('.pie_progress').asPieProgress({
	        namespace: 'pie_progress',
	        easing: 'linear',
	        first: 1000,
	        max: 1000,
	        goal: 0,
	        speed: 100, // 120 s * 1000 ms per s / 100
	        barcolor: '#333',
	        barsize: '6',
	        trackcolor: 'rgba(125, 121, 121, 0.2)',
	      });
    });
	</script>
	<!-- 全屏视频 -->
	<script type="text/javascript" src="${SERVER_PATH}/resources/js/jquery.easing.min.js"></script>
    <!-- parallax -->
    <script type="text/javascript" src="${SERVER_PATH}/resources/js/parallax/parallax.js"></script>
	<!-- 鼠标事件 -->
    <script type="text/javascript" src="${SERVER_PATH}/resources/js/mousewheel/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="${SERVER_PATH}/resources/js/event-util.js"></script>
    <!-- 手机触摸事件 -->
    <script type="text/javascript" src="${SERVER_PATH}/resources/js/touch/jquery.touchSwipe.min.js"></script>
    <!-- 图片处理 -->
    <script type="text/javascript" src="${SERVER_PATH}/resources/js/imgReady.js"></script>
    
	<script>
	var indexArr7 = [ { id:'scroll1',url: 'http://on01whf2s.bkt.clouddn.com/peanut/4.jpg?imageslim', state : false}, 
		{ id:'scroll2',url: 'http://on01whf2s.bkt.clouddn.com/peanut/1.jpg?imageslim', state : false}, 
		{ id:'scroll3',url: 'http://on01whf2s.bkt.clouddn.com/peanut/7.jpg?imageslim', state : false},
		{ id:'scroll4',url: 'http://on01whf2s.bkt.clouddn.com/peanut/2.jpg?imageslim', state : false},
		{ id:'scroll5',url: 'http://on01whf2s.bkt.clouddn.com/peanut/5.jpg?imageslim', state : false},
		{ id:'scroll6',url: 'http://on01whf2s.bkt.clouddn.com/peanut/3.jpg?imageslim', state : false},
		{ id:'scroll7',url: 'http://on01whf2s.bkt.clouddn.com/peanut/6.jpg?imageslim', state : false}];
	function showIndexState() {
		for(i = 0; i < indexArr7.length; i++)  {  
			if(!indexArr7[i].state)  {  
				$('#'+indexArr7[i].id).attr("src", indexArr7[i].url); 
				indexArr7[i].state = true;  
			} 
		}  
	}
	
	if(indexArr7[0].state){
		clearInterval();
	} else{
		setInterval("showIndexState()",1000);  
	// 每间隔 2 秒后调用如上方法, 当然,正常应用应该将此时间间隔设置小一些, 此处 仅 为了方便大家看效果  
		
	}
	
	function setTop(page, index){
		topKey = function(){
			parallax[page].top();
			$('.pie_progress').asPieProgress('reset');
		};
		mouseScrollUp= function(){
			parallax[page].top();
			$('.pie_progress').asPieProgress('reset');
		};
		touchUp = function(){
			parallax[page].top();
			$('.pie_progress').asPieProgress('reset');
		};
	}

	function setBottom(page, text){
		bottomKey = function(){
			parallax[page].bottom();
			$('.pie_progress').asPieProgress('reset');
		};
		
		mouseScrollDown  = function(){
			parallax[page].bottom();
			$('.pie_progress').asPieProgress('reset');
		};
		touchDown = function(){
			parallax[page].bottom();
			$('.pie_progress').asPieProgress('reset');
		};
	}
	
	function setTimer(index) {
		clearInterval(timmer);
        $('.pie_progress').asPieProgress('start');
		var i = 9;
		timmer = setInterval(function () {
			if(i != 0){
		    	--i;
			} else {
		        $('.pie_progress').asPieProgress('reset');
				if(index==8) {
					parallax['section2'].bottom();
				} else {
					parallax['section'+(index+1)].bottom();
				}
			}
		}, 1000); 
	}
	
	function toNext(){
		parallax['section2'].bottom();
	}
	

	function loadImage(url, callback) { 
		var img = new Image(); //创建一个Image对象，实现图片的预下载 
		img.src = url; 
		if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数 
			callback.call(img); 
			return; // 直接返回，不用再处理onload事件 
		} 
		img.onload = function () { //图片下载完毕时异步调用callback函数。 
			callback.call(img);//将回调函数的this替换为Image对象 
		}; 
	}; 
	
	// 清除flex
	function setWidth(index){
		var width =  $(window).width();
		if(width < 769){
			// 导航栏--在低于786下时，显示小的导航栏
			$('.section').each( function( index, val ) {
				$(this).find('div.flexbox').removeClass('flexbox');
			});
			$('.img-bg').show();
		} else {
			$('.section').each( function( index, val ) {
				if(!$(this).hasClass('section1')) {
					$(this).find('div.posi-relative').addClass('flexbox');
				}
			});
			$('.img-bg').hide();
		}
	}
	

	$(window).resize(function() {
		setWidth();
	});
	

	var rightKey, leftKey, topKey, bottomKey;
	var mouseScrollUp, mouseScrollDown;
	var touchUp, touchDown;
	var timmer;
	var s = 0;
	$(function(){
		var starttime = 0,endtime = 0;
		// 键盘监控
		//Set up the triggers for the arrow keys
		$(document).keydown(function(e){
			if (e.keyCode == 37 && typeof leftKey === 'function') {
				leftKey();
			} else if(e.keyCode == 38 && typeof topKey === 'function') {
				topKey();

			} else if(e.keyCode == 39 && typeof rightKey === 'function') {
				rightKey();
			} else if(e.keyCode == 40 && typeof bottomKey === 'function') {
				bottomKey();

			}
		});
		
		// 鼠标监控
		function handleMouseWheel(event) {
	        event = event_util.getEvent(event);
	        var delta = event_util.getWheelDelta(event);
	        if (delta > 0 && typeof mouseScrollUp === 'function') {
		        // 向上滚
		    		mouseScrollUp();
				mouseScrollUp = mouseScrollDown = "";
		    } else if (delta < 0 && typeof mouseScrollDown === 'function') {
		        // 向下滚
		        mouseScrollDown();
				mouseScrollUp = mouseScrollDown = "";
		    }
	    }
	    event_util.addHandler(document, "DOMMouseScroll", handleMouseWheel);
	    event_util.addHandler(document, "mousewheel", handleMouseWheel);
		
	    // 手机触摸事件
	    	$(window).swipe( {
		    swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
			    	if(direction=='up' && typeof touchUp === 'function') {
			    		touchDown();
			    	} else if(direction == 'down' && typeof touchDown === 'function'){
			    		touchUp();
			    	}
		    }
	  	});
		// 整屏滚动
		parallax.add($("#section1"))
				.add($("#section2"))
				.add($("#section3"))
				.add($("#section4"))
				.add($("#section5"))
				.add($("#section6"))
				.add($("#section7"))
				.add($("#section8"));

		parallax.speed = 800;
		parallax.easing = 'easeInOutExpo';
		parallax.sliding = false;
	
		//Clears each page navigation on load
		parallax.preload = function(){
			rightKey = leftKey = topKey = bottomKey = "";
			mouseScrollUp = mouseScrollDown = "";
		};
		
		/* parallax.section1.onload=function(){
			setTop("section8", 1);
			setBottom("section2",1);
		};  */
		parallax.section2.onload=function(){
			setTimer(2);
			setTop("section8", 2);
			setBottom("section3", 2);
			  
		};
		parallax.section3.onload=function(){
			setTimer(3);
			setTop("section2", 3);
			setBottom("section4", 3);
		};
		parallax.section4.onload=function(){
			setTimer(4);
			setTop("section3", 4);
			setBottom("section5", 4);
		};
		parallax.section5.onload=function(){
			setTimer(5);
			setTop("section4", 5);
			setBottom("section6", 5);
		};
		parallax.section6.onload=function(){
			setTimer(6);
			setTop("section5", 6);
			setBottom("section7", 6);
		};
		parallax.section7.onload=function(){
			setTimer(7);
			setTop("section6", 7);
			setBottom("section8", 7);
		};
		parallax.section8.onload=function(){
			setTimer(8);
			setTop("section7", 8);
			setBottom("section2", 8);
		};
		
		parallax.section1.show();
		setWidth();
	});
	</script>
</html>